<template>
  <div>
    <div ref="day"   style="width: 100%;height: 500px;" />
    <hour v-if="monthVisible" />
  </div>
</template>

<script>
/**
     *
     */
import echarts from 'echarts'
import Hour from './hour'

export default {
  name: 'Day',
  components: { Hour },
  props: ['month'], // month : 要显示的月份
  data() {
    return {
      offsetX: '',
      offsetY: '',
      monthVisible: false,
      chart: null,
      // sql -- 按每月的天统计
      weekData: [{ 'number': 51468, 'month': '5', 'sday': 4.0 }, {
        'number': 52735,
        'month': '5',
        'sday': 5.0
      }, { 'number': 51793, 'month': '5', 'sday': 6.0 }, {
        'number': 50348,
        'month': '5',
        'sday': 7.0
      }, { 'number': 47961, 'month': '5', 'sday': 8.0 }, {
        'number': 48061,
        'month': '5',
        'sday': 9.0
      }, { 'number': 50486, 'month': '5', 'sday': 10.0 }]// 模拟数据
    }
  }, mounted() {
    this.chart = echarts.init(this.$refs.day);
    const option = {
      title: {
        text: '2012年6月',
        x: 'center'
      },
      dataset: {
        dimensions: ['number', 'month', 'sday'],
        source: this.weekData
      },
      xAxis: {
        type: 'category', name: '日期', nameTextStyle: {
          fontSize: 20
        },
        axisLabel: {
          formatter: function(value, index) {
            return `2012年4月${value}日`
          }
        }
      },
      // 声明一个 Y 轴，数值轴。
      yAxis: {
        type: 'value', name: '访问次数', nameTextStyle: {
          fontSize: 20
        }, axisLabel: {
          formatter: function(value, index) {
            if (value == 0) return 0
            const item = value / 1000
            return ` ${item}千次`
          }
        }
      },
      series: [
        {
          type: 'line',
          encode: {
            x: 'sday',
            y: 'number'
          },
          symbolSize: function(val) {
            return 15
          },
          lineStyle: {
            normal: {
              color: 'green',
              width: 4,
              type: 'dashed'
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 3,
              borderColor: 'red',
              color: 'black'
            }
          }
        }
      ]
    }
    this.chart.setOption(option)
    var _this = this
    this.chart.on('mouseover', function(params) {
      _this.monthVisible = true
      _this.offsetY = params.event.event.offsetY + 10
    })
    this.chart.on('mouseout', function(params) {
      // _this.monthVisible = false;
    })
  }
}
</script>

<style scoped>

</style>
